<route lang="json5">
{
  layout: "page",
  style: {
    navigationBarTitleText: "活动详情",
  },
}
</route>

<template>
  <view class="activity-detail">
    <!-- <view class="flex justify-between mb-10rpx">
      <view class="flex-1 flex">
        <image
          class="h-[96rpx] w-[96rpx]"
          src="/static/images/rocket.png"
          mode="aspectFill"
        />
        <view class="ml-10rpx center">
          <view class="text-#000 text-32rpx">{{ activityObj.title }}</view>
          <view class="flex items-center">
            <image
              class="h-[30rpx] w-[30rpx]"
              src="/static/images/location.png"
              mode="aspectFill"
            />
            <view class="text-#000 text-24rpx ml-4rpx">北京</view>
            <view class="text-#999 text-24rpx ml-20rpx">1个小时前在线</view>
          </view>
        </view>
      </view>
      <view class="flex center mt-20rpx">
        <view class="bg-#000 w-8rpx h-8rpx rounded-8rpx"></view>
        <view class="bg-#000 w-8rpx h-8rpx rounded-8rpx ml-10rpx"></view>
        <view class="bg-#000 w-8rpx h-8rpx rounded-8rpx ml-10rpx"></view>
      </view>
    </view> -->
    <!-- <image class="w-100%" :src="activityObj.coverImage" mode="widthFix" />-->
    <view class="activity-detail-content">
      <view class="flex mb-20rpx items-center">
        <view class="text-xl font-bold text-#000 ml-8rpx">
          {{ activityObj.title }}
        </view>
      </view>
      <view class="flex items-center mb-15rpx">
        <view
          class="flex mr-2 items-center bg-#B8F069 rounded-6rpx w-80rpx h-32rpx justify-center"
        >
          <image
            class="h-[19rpx] w-[19rpx]"
            src="/static/images/action-fire.png"
            mode="aspectFill"
          />
          <view class="text-16rpx text-#1b1b1b ml-4rpx">活动</view>
        </view>
        <view v-if="activityObj.startTime" class="flex items-center">
          <image
            class="h-[24rpx] w-[24rpx]"
            src="/static/images/action-time.png"
            mode="aspectFill"
          />
          <view class="text-#a6a6a6 text-20rpx ml-10rpx">
            时间：{{ activityObj.startTime }} : {{ activityObj.endTime }}
          </view>
        </view>
      </view>
      <view
        class="text-md text-#000 mb-20rpx ml-8rpx"
        v-html="activityObj.description"
      >
      </view>
      <view
        v-if="activityObj.content"
        class="content"
        v-html="activityObj.content"
      ></view>
      <video
        v-if="activityObj.videoUrl"
        class="w-100%"
        id="myVideo"
        :src="activityObj.videoUrl"
        enable-danmu
        danmu-btn
        controls
      ></video>
      <!-- <view class="flex items-center mb-8rpx mt-8rpx">
      <image
        class="h-[24rpx] w-[24rpx]"
        src="/static/images/action-time.png"
        mode="aspectFill"
      />
      <view class="text-#a6a6a6 text-20rpx ml-10rpx"
        >地址：北京梦涛网络科技有限公司</view
      >
    </view> -->
    </view>

    <view class="bottom-btns">
      <div class="flex justify-between bottom-btns-content">
        <view @click="openPopup('bottom')" class="flex flex-1 items-center">
          <view class="flex items-center">
            <image
              class="h-[32rpx] w-[32rpx]"
              src="/static/images/action-user.png"
              mode="aspectFill"
            />
            <image
              class="h-[32rpx] w-[32rpx] ml-[-10rpx]"
              src="/static/images/action-user.png"
              mode="aspectFill"
            />
            <image
              class="h-[32rpx] w-[32rpx] ml-[-10rpx]"
              src="/static/images/action-user.png"
              mode="aspectFill"
            />
          </view>
          <view class="text-#a6a6a6 text-24rpx ml-20rpx">
            {{ activityObj.currentParticipants }}人参与
          </view>
        </view>
        <view
          class="text-24rpx h-64rpx flex items-center bussines-button"
          :style="getStatusStyle(activityObj)"
          @click="eventRegistrations(activityObj)"
        >
          {{ getStatusText(activityObj) }}
        </view>
      </div>
      <wd-popup
        custom-style="padding: 20px 10px; overflow: hidden; height: 400px; border-top-left-radius: 10px; border-top-right-radius: 10px"
        v-model="show"
        position="bottom"
        closable
      >
        <view class="comment-list">
          <view v-for="(item, index) in activityComments" :key="index">
            <view
              class="flex items-center mb-10rpx"
              @click="handleCommentClick(item)"
            >
              <image
                class="avatar h-10 w-10 rounded-md mr-10rpx"
                :src="item.avatarUrl || avatarUrl"
              />
              <view class="text">
                <view class="name font-bold text-lg">{{
                  item.nickname || "昵称"
                }}</view>
                <view class="desc text-md text-gray-400">{{ item.title }}</view>
              </view>
            </view>
          </view>
        </view>
      </wd-popup>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { httpGetActivityDetail } from "@/service/home";
import { httpGetlistMine } from "@/service/activity";
import { superManagerPermission, managerPermission } from "@/utils";
import { currRoute } from "@/utils";
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const loading = ref<Boolean>(false);
const activityId = ref<any>(null);
const popup = ref<any>(null);
const show = ref<any>(false);

const activityObj = ref<any>({
  // id: 0,
  // title: "活动标题(必填)",
  // description: "活动描述(必填)",
  // startTime: "2025-01-06 00:00:00",
  // endTime: "2025-02-06 23:59:59",
  // tags: "活动标签(多个标签用逗号分隔)",
  // creatorId: 0,
  // coverImage: "活动封面图URL",
  // maxParticipants: 0, // 最大参与人数(0表示不限制)
  // currentParticipants: 0, // 当前参与人数
  // content: ""
});

const activityComments = ref<any>([]);

const statusConfig = {
  notStart: {
    text: "活动未开始",
    bgColor: "#F0F0F0",
    textColor: "#666",
  },
  ongoing: {
    text: "活动进行中",
    bgColor: "#C8FF7A",
    textColor: "#1a1a1a",
  },
  ended: {
    text: "活动结束",
    bgColor: "#FFB6C1",
    textColor: "#D8000C",
  },
};

const handleCommentClick = (item: any) => {
  uni.navigateTo({
    url: `/pages-sub/squareDetail/index?id=${item.id}`,
  });
};
const parseTime = (timeStr) => {
  // 将空格替换为T以兼容IOS系统
  return Date.parse(timeStr?.replace(" ", "T"));
};

const openPopup = async () => {
  if (
    superManagerPermission(userInfo?.value?.role) ||
    managerPermission(userInfo?.value?.role)
  ) {
    await getListMine(activityId.value);
    // popup.value.open("bottom");
    show.value = true;
  }
};
const closePopup = () => {
  // popup.value.close();
  show.value = false;
};

const getStatusType = (item) => {
  try {
    const now = Date.now();
    const start = parseTime(item.startTime);
    const end = parseTime(item.endTime);

    if (now < start) return "notStart";
    if (now > end) return "ended";
    return "ongoing";
  } catch (e) {
    console.error("时间解析错误:", e);
    return "ended"; // 默认状态
  }
};

const eventRegistrations = (item) => {
  if (getStatusType(item) === "ongoing") {
    uni.navigateTo({
      url: `/pages-sub/eventRegistrations/index?activityId=${item.id}`,
    });
  }
};

const getStatusStyle = (item) => {
  const type = getStatusType(item);
  return {
    backgroundColor: statusConfig[type].bgColor,
    color: statusConfig[type].textColor,
  };
};

const getStatusText = (item) => {
  return statusConfig[getStatusType(item)].text;
};

const getActivityDetai = async (id: any) => {
  try {
    loading.value = true;
    const res = await httpGetActivityDetail({ id });
    if (res.code === 200) {
      activityObj.value = res.data;
    }
    loading.value = false;
  } catch (error) {
    console.log(error, "error");
    loading.value = false;
  }
};

const getListMine = async (id) => {
  try {
    loading.value = true;
    const res = await httpGetlistMine({ id });
    if (res.code === 200) {
      activityComments.value = res.data.records;
    }
    loading.value = false;
  } catch (error) {
    console.log(error, "error");
    loading.value = false;
  }
};

onLoad(() => {
  const pathObj = currRoute();
  const { id } = pathObj.query;
  if (id) {
    activityId.value = id;
  }
});

onShow(() => {
  if (activityId.value) {
    getActivityDetai(activityId.value);
  }
});
</script>

<style lang="scss" scoped>
.activity-detail {
  position: relative;
  min-height: 100vh;
  background: #fff;
  // padding: 0 35rpx;
  // padding-bottom: 120rpx;
  padding-bottom: 110rpx;

  .activity-detail-content {
    padding: 0 35rpx;
  }

  .bottom-btns {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #eeeeee;

    .bottom-btns-content {
      padding: 20rpx 35rpx;

      .bussines-button {
        padding: 0 35rpx;
        border: 1px solid #1a1a1a;
        border-radius: 32rpx;
      }
    }
  }
}
</style>
